<template>
  <!-- 项目组件：最下方tabbar栏/分为首页、分类、购物车、我的 -->
  <tabbar class="main-tabbar">
    <tabbar-item path="/home" activeColor="#ff921f">
      <template v-slot:item-icon>
        <img src="~assets/img/tabbar/index.png" alt="">
      </template>
      <template v-slot:item-icon-active>
        <img src="~assets/img/tabbar/index2.png" alt="">
      </template>
      <template v-slot:item-text>
        <span>首页</span>
      </template>
    </tabbar-item>
    <tabbar-item path="/category">
      <template v-slot:item-icon>
        <img src="~assets/img/tabbar/channel.png" alt="">
      </template>
      <template v-slot:item-icon-active>
        <img src="~assets/img/tabbar/channel2.png" alt="">
      </template>
      <template v-slot:item-text>
        <span>分类</span>
      </template>
    </tabbar-item>
    <tabbar-item path="/cart">
      <template v-slot:item-icon>
        <img src="~assets/img/tabbar/find.png" alt="">
      </template>
      <template v-slot:item-icon-active>
        <img src="~assets/img/tabbar/find2.png" alt="">
      </template>
      <template v-slot:item-text><span>购物车</span></template>
    </tabbar-item>
    <tabbar-item path="/profile">
      <template v-slot:item-icon>
        <img src="~assets/img/tabbar/my.png" alt="">
      </template>
      <template v-slot:item-icon-active>
        <img src="~assets/img/tabbar/my2.png" alt="">
      </template>
      <template v-slot:item-text>
        <span>我的</span>
      </template>
    </tabbar-item>
  </tabbar>
</template>

<script>
import tabbar from 'components/common/tabbar/tabbar.vue'
import tabbarItem from 'components/common/tabbar/tabbar_item.vue'

export default {
  name: "main-tabbar",
  components: {
    tabbar,
    tabbarItem
  }
}
</script>

<style scoped>

</style>
